<template>
	<base-popup
		class="h-[600px]"
		:show="showDialog"
		titleT="miniGames.fairness"
		titleIcon="justice"
		@close="onClose">
		<div class="py-[20px] px-[18px]" v-if="!loading">
			<n-tabs
				:value="seeds"
				size="large"
				justify-content="space-evenly"
				@update:value="(val) => (seeds = val)">
				<n-tab-pane name="seeds" :tab="$t('miniGames.seeds')" display-directive="show">
					<FairnessSeeds :data="seedData" @update="getDetail" />
				</n-tab-pane>
				<n-tab-pane name="verify" :tab="$t('miniGames.verification')" display-directive="show">
					<FairnessVerify :showDialog="showDialog" />
				</n-tab-pane>
			</n-tabs>
		</div>
		<div v-else class="w-[100%] min-h-[50vh] mt-4 flex justify-center items-center">
			<base-loading block></base-loading>
		</div>
	</base-popup>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { NTabs, NTabPane } from 'naive-ui'
import { BasePopup, BaseLoading } from '@/components/base'
import FairnessSeeds from './components/fairness-seeds.vue'
import FairnessVerify from './components/fairness-verify.vue'
import { getSeed } from '@/api/third/mini-games'
import { useGameDetailStore } from '@/store'

const gameDetailStore = useGameDetailStore()
const props = defineProps({
	showDialog: {
		type: Boolean,
		default: false
	},
	gameType: {
		type: String,
		default: 'plinko'
	}
})

const loading = ref(false)
const seeds = ref('seeds')
const seedData = ref<any>({})
const emit = defineEmits(['close'])

watch(
	[() => props.showDialog, () => gameDetailStore.gameResultData],
	([val, gameResultData]: any) => {
		if (val) {
			seeds.value = 'seeds'
			loading.value = true
			getDetail()
		}
		if (gameResultData?.serverSeed) {
			seeds.value = 'verify'
		}
	}
)
const getDetail = async () => {
	const res = await getSeed().finally(() => {
		loading.value = false
	})
	seedData.value = res.data || {}
}

const onClose = () => {
	emit('close')
	gameDetailStore.setGameResult(null)
}
</script>
<style lang="scss" scoped>
.overflow-text__hidden {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
